<template>
    <div class="bulletinBoard">
        <!--通报榜-->
        <div id="div-right2">
            <div class="div-right-title">
                <div class="div-right-title-box">
                </div>通报榜</div>
            <div class="div-right-tools clearfloat">
                <div class="div-right-time-tabs pointer f-r" title="通报榜">
                  <div :class="{'tab-checked':isActiveTime == 'M'}"
                       @click="TimeClick('M')"
                       class="div-right-time-tab f-r">本月</div>
                  <div :class="{'tab-checked':isActiveTime == 'W'}"
                         @click="TimeClick('W')"
                      class="div-right-time-tab f-r">本周</div>
                </div>
            </div>

            <div class="div-right-content">
                <div class="div-right2-content-tab pointer">
                    <span :class="{'tab-checked':status === 1}"
                          @click="DoClick(1)">超时处置</span>
                    <span :class="{'tab-checked':status === 2}"
                          @click="DoClick(2)">超时未完成</span>
                </div>
                <div class="content-detail">
                    <div class="content-left-ul">
                        <ul class="tab-ul">
                          <li class="pointer" :title="item.stationName+'：'+item.num"  v-for="item in leftData" :key="item.stationId">
                            <div class="station-name longtxt">
                              <div class="station-index">{{item.sort}}</div>
                              {{item.stationName}}
                            </div>
                            <div class="station-num">{{item.num}}条</div>
                          </li>
                        </ul>
                    </div>
                    <!--分割线-->
                  <img src="@/assets/img/splite_line.png" alt="">
                  <div class="content-right-ul">
                    <ul class="tab-ul">
                      <li class="pointer" :title="item.stationName+'：'+item.num" v-for="item in rightData" :key="item.stationId">
                        <div class="station-name longtxt">
                          <div class="station-index">{{item.sort}}</div>
                          {{item.stationName}}
                        </div>
                        <div class="station-num">{{item.num}}条</div>
                      </li>
                    </ul>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'bulletinBoard',
  data () {
    return {
      isActiveTime: 'W', // 'M' | 'W'
      status: 1, // 状态1:超时处置 2：超时未完成
      leftData: [], // 左侧数据
      rightData: [] // 右侧数据 如果是市局用户就是分局，如果是分局用户就是派出所，派出所用户和分局一样
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      this.getData()
      this.initScroll('.content-left-ul', 'timeLeft')
      this.initScroll('.content-right-ul', 'timeRight')
    },
    // 通报榜初始化数据
    getData () {
      // let stationId = '9BECB65D-4E52-4039-993B-369DAA145EAF' // 市局
      // let stationNum = 'SJ'

      let stationId = 'FD705A32-B305-4F76-87B0-55908993B6F9' // 分局
      let stationNum = 'FJ'

      this.$axios({
        url: this.Monitor +
          '/monitorStatistics/stationPublicSentimentStatic/' +
          this.isActiveTime + '/' +
          stationId + '/' +
          this.status,
        method: 'get'
      }).then(res => {
        let _leftData = []
        let _rightData = []
        if (stationNum === 'SJ') {
          _leftData = res.data.data.slice(0, res.data.data.length / 2)
          _rightData = res.data.data.slice(res.data.data.length / 2)
        } else { // 其余角色登陆和分局一样的
          res.data.data.map(item => {
            if (item.stationNum === 'FJ') {
              _leftData.push(item)
            } else if (item.stationNum === 'PCS') {
              _rightData.push(item)
            }
          })
        }
        this.leftData = _leftData
        this.rightData = _rightData
        console.log(res.data.data)
      }).catch(err => {
        console.log(err, '通报榜')
      })
    },
    // 周和月的切换
    TimeClick (str) {
      this.isActiveTime = str
      this.getData()
    },
    // 超时处置和超时未完成 切换
    DoClick (num) {
      this.status = num
      this.getData()
    },
    initScroll (str, scrollTimer) {
      let self = this
      /* eslint-disable*/
      $(function () {
        var $this = $(str)
        $this.hover(function () {
          clearInterval(scrollTimer)
        },
        function () {
          scrollTimer = setInterval(function () {
            self.scrollNews($this, 6)
          }, 3000)
        }).trigger('mouseout')
      })
    }
  }
}
</script>

<style scoped>

</style>
